import { Button } from "antd-mobile";
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { quitLogin } from "../../store/user/userSlice";

const My = () => {
  const userInfo = useSelector((state) => state.user.userInfo);
  console.log(userInfo);
  const navigate = useNavigate();
  const dispatch = useDispatch()
  return (
    <div>
      <div
        style={{
          height: 200,
          display: "flex",
          justifyContent: "space-around",
          alignItems: "center",
        }}
      >
        {userInfo.avator ? (
          <div
            style={{
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <img src={userInfo.avator} alt="" width={100} height={100} />
            <div>
              <span>昵称：{userInfo.nickname}</span>
              <Button block onClick={() => dispatch(quitLogin())}>退出登录</Button>
            </div>
          </div>
        ) : (
          <div>
            <Button onClick={() => navigate("/login")}>
              用户未登录， 请登录！！！
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default My;
